<template name="MessageForm">
  {{#autoForm collection=formCollection schema=formSchema id="message-form" threadId=thread._id}}
    {{> afQuickField name="content"}}

    {{#with parentMessage}}
      <div>
        <a href="#" id="btn-remove-quote" class="small text-muted pull-right" style="margin-right: 10px;">{{_ "app_action_remove"}}</a>
        {{> QuotedMessage}}
      </div>
    {{/with}}

    {{#if pendingFiles.count}}
    <ul class="files nav nav-pills nav-stacked" style="margin-bottom: 10px;">
      {{#each pendingFiles}}
        <li>
          {{{fileicon type}}} {{name}} <span class="text-muted">({{filesize size}})</span>
          <div class="actions pull-right">
            {{> FileEditNameLink}}
            {{> FileViewLink}}
            {{> FileRemoveLink}}
          </div>
        </li>
      {{/each}}
    </ul>
    {{/if}}

    <div class="clearfix">
      <div class="btn-group pull-right">
        <button type="submit" class="btn btn-primary">{{_ 'app_action_send'}}</button>
        {{#if options}}
          <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right">
              <li><a href="#" id="btn-load-image"><i class="fa fa-image"></i>{{_ "message_action_send_image"}}</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#" id="btn-markdown"><i class="fa fa-file-code-o"></i>{{_ "message_action_send_markdown"}}</a></li>
            </ul>
          </div>
        {{/if}}
      </div>
      <input type="file" style="display:none;" id="image-file" accept="image/*"/>
      <div id="message-form-actions" class="text-muted">
        {{> UploadFile thread=thread}}
        {{#if showInternal}}
          {{> afFieldInput name="internal"}}
        {{/if}}
      </div>
    </div>
  {{/autoForm}}
</template>

<template name="ImageMessageModal">
  <div class="modal fade full-screen image-only">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
          <h4 class="modal-title">{{_ "message_send_image_message"}}</h4>
        </div>
        {{#autoForm collection=formCollection schema=formSchema id="image-message-form" threadId=thread._id}}
        <div class="modal-body scroll-box">
          {{> afQuickField name="content" placeholder=contentPlaceholder}}
          <p class="text-center add-comment"><a href='#'>{{_ 'message_write_something'}}</a></p>
          {{#with currentUpload}}{{> spinner}}{{/with}}
          <div id="image-preview" class="center-block img-thumbnail">{{> spinner}}</div>
        </div>
        <div class="modal-footer">
          {{#if thread.hasReplyableExternalMembers}}
            <div class="text-muted pull-left">{{> afFieldInput name="internal"}}</div>
          {{/if}}
          <button type="button" class="btn btn-default" data-dismiss="modal" aria-label="Close">{{_ 'app_action_discard'}}</button>
          <button type="button" class="btn btn-primary" id="btn-send-image">{{_ "app_action_send"}}</button>
        </div>
        {{/autoForm}}
      </div>
    </div>
  </div>
</template>
